<template>
  <div style="min-width: 250px">
    <el-row :gutter="18">
      <!--部门数据-->
      <el-col :span="24" :xs="24">
        <div class="head-container">
          <el-input placeholder="输入内容" v-model="queryValue" size="small" >
            <el-select v-model="queryProp" slot="prepend" placeholder="请选择" style="width:75px">
              <el-option label="名称" value="name"></el-option>
              <el-option label="编号" value="code"></el-option>
            </el-select>
            <el-button-group slot="append" style="width:50px">
              <el-button icon="el-icon-search" @click="handleQueryOrgList" type="primary" size="small"></el-button>
              <el-button icon="el-icon-refresh" @click="handleReset" size="small"></el-button>
            </el-button-group>

          </el-input>
        </div>
        <div class="head-container">
          <el-table v-if="searching" v-loading="loading"
                    height="500"
                    min-width="250"
                    :data="tableData"
                    border
                    fit
                    @cell-click="handleTableCellDblClick">
            <el-table-column label="姓名" align="left" prop="name" min-width="100" fixed show-overflow-tooltip/>
            <el-table-column label="机构" align="left" prop="fullName" min-width="150" show-overflow-tooltip/>
          </el-table>
          <!-- 分页组件 -->
          <pagination v-if="searching"
                      v-show="total > queryParams.pageSize"
                      layout="prev,pager,next"
                      :total="total"
                      :page.sync="queryParams.pageNo"
                      :limit.sync="queryParams.pageSize"
                      pager-count="5" small
                      @pagination="handleQueryOrgList"/>


          <el-card v-else class="box-card" shadow="never" min-width="250px" body-style="width:100%;height:550px;overflow:auto">
            <el-tree :props="defaultProps" :expand-on-click-node="false" lazy :load="nodeExpand"
                     :filter-node-method="filterNode" style="height:100%"
                     ref="tree" highlight-current @node-click="handleNodeClick"/>


          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getOrg,
  getOrgPage,
  exportOrgExcel,
  queryOrgTree
} from "@/api/sa/org";
import {CommonStatusEnum, OrgKindEnum, YesOrNo} from "@/utils/constants";

export default {
  name: "SaOrgTree",
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 弹出层标题
      title: "",
      // 机构搜索
      orgName: '',
      orgOptions: undefined,
      defaultProps: {
        children: "children",
        label: "name"
      },
      currentOrgTreeId: '',
      currentOrgTreeData: {},
      queryOrgKindIds: {}, //查询的机构类型

      rootKindCode: OrgKindEnum.Root.code,
      orgKindCode: OrgKindEnum.Org.code,
      deptKindCode: OrgKindEnum.Dept.code,
      centerKindCode: OrgKindEnum.Center.code,
      positionKindCode: OrgKindEnum.Position.code,
      statusDictDatas: [YesOrNo.YES, YesOrNo.NO],

      searching: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        status: 0, // 有效
        isVirtual: 0 //非虚拟组织
      },
      queryProp: 'name',
      queryValue: '',
      tableData: [],
      total: 0

    };
  },
  created() {

  },

  methods: {
    // 显示机构类型
    getOrgKindName(orgKindId) {
      for (let item in OrgKindEnum) {
        if (orgKindId == OrgKindEnum[item].code) {
          return OrgKindEnum[item].name;
        }
      }
      return "错误类型"
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },

    //懒加载树节点，
    nodeExpand(node, resolve) {
      let id = node.level == 0 ? '' : node.data.id
      queryOrgTree(id).then(response => {
        resolve(response.data);
      });
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.$emit("node-click", data);
    },

    handleReset() {
      delete this.queryParams[this.queryProp]
      this.queryParams.pageNo = 1
      this.searching = false
      this.queryValue = ''
    },

    handleQueryOrgList() {
      this.loading = true;
      // 执行查询
      this.queryParams[this.queryProp] = this.queryValue
      getOrgPage(this.queryParams).then(response => {
        this.tableData = response.data.list;
        this.total = response.data.total;
        this.loading = false;
        this.searching = true;
      });
    },

    // 机构表格行双击节点单击事件
    handleTableCellDblClick(data) {
      this.$emit("node-click", data);
    },


    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.personFormOpen = false;
      this.reset();
    }
  }
};
</script>
